<template>

  <div class="content">
    <HomeHeader />
    <!-- 滑动分类栏-->
    <van-tabs v-model:active="activeId" @change="switchCate">
      <van-tab v-for="cate in cates" :title="cate.name" :name="cate.id">
        <div class="gengduo">
          <van-icon class="genduoIcon" class-prefix="icon" name="gengduo" size="20PX" />
        </div>
        <!--轮播-->
        <div v-if="(activeId === homeId)">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="banner in banners" :key="banner.id">
              <img :src="banner.picUrl" alt="">
            </van-swipe-item>
          </van-swipe>
          <!--网格-->
          <van-grid clickable column-num="4" style="overflow: auto; height: 86px;">
            <van-grid-item :icon="cate.icon" :text="cate.name" v-for="cate in cates" :key="cate.id" :to="{
              path: '/itemLists',
              query: {
                cateId: cate.id
              }
            }" />
          </van-grid>
          <!-- <van-tabs v-model:active="activeId">
            <van-tab v-for="cate in cates" :title="cate.name" :name="cate.id">
            </van-tab>
          </van-tabs> -->
          <!-- <section>
            <ul>
              <li v-for="cate in cates">
                <img :src="cate.icon" alt="">

              </li>
            </ul>
          </section> -->
        </div>
      </van-tab>
      <!--轮播-->
    </van-tabs>
    <!--滑动分类栏 -->
    <!--商品列表-->
    <div v-if="!items.length" class="nothing">暂无数据</div>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="reachBottom">
      <div class="items">
        <div class="item" v-for="item in items" @click="enterDetail(item.id)">
          <img :src="item.pic" alt="">
          <div class="item-info">
            <h5>{{ item.name }}</h5>
            ￥<span>{{ item.originalPrice }}</span>
            <van-icon @click.stop="addItemCart(item.id)" class="addCart" class-prefix="icon" name="gouwuchetianjia"
              size="20PX" />
          </div>
        </div>
      </div>
    </van-list>
    <!--商品列表-->
    <CommonTabbar />

  </div>
</template>

<script setup lang="ts" name="home">
import HomeHeader from './components/HomeHeader.vue';
import CommonTabbar from '@/components/CommonTabbar.vue';
import { fetchCates, fetchHomeBanner, fetchList, addCart } from '@a/index'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
//顶部滑动 请求所有分类
let homeId = -1
const activeId = ref<number>(-1)
const cates = ref<Array<any>>([])
const fetchItemCates = () => {
  fetchCates().then((res: any) => {
    console.log(res);
    if (res.data.code === 0) {
      console.log(res);
      cates.value = res.data.data
      activeId.value = res.data.data[0].id
      homeId = res.data.data[0].id
      // 所有分类获取 activeId初始值 为第一个分类时 请求商品列表
      // fetchItemsByCateId(activeId.value)
    }
  })
}
//轮播
const banners = ref<Array<any>>([])
const fetchBanners = () => {
  fetchHomeBanner().then((res: any) => {
    if (res.data.code === 0) {
      banners.value = res.data.data
    }
  })
}
//点击tab 切换不同分类
const switchCate = () => {
  //上拉加载分页状态
  items.value = []
  finished.value = false
  page.value = 1
  //重新请求商品列表
  fetchItemsByCateId(activeId.value)
}
//上拉加载 商品列表
const loading = ref<boolean>(false)
const finished = ref<boolean>(false)
const reachBottom = () => {
  //触底事件发生 page+1 重新请求商品列表
  page.value++
  fetchItemsByCateId(activeId.value)
}
// 获取商品列表
const items = ref<Array<any>>([])
const page = ref<number>(1)
const pageSize = ref<number>(5)
const fetchItemsByCateId = (cateId: number) => {
  fetchList({
    categoryId: cateId,
    page: page.value,
    pageSize: pageSize.value
  }).then(res => {
    console.log(res);
    loading.value = false
    if (res.data.code === 0) {
      items.value = [
        ...items.value,
        ...res.data.data.result
      ]
    }

  })
}
//跳转详情
const router = useRouter()
const enterDetail = (id: number) => {
  router.push({
    path: '/details',
    query: {
      id
    }
  })
}
//加入购物车
const addItemCart = (goodId: number) => {
  addCart({
    goodsId: goodId,
    number: 1
  }).then(res => {
    console.log(res);
    if (res.data.code === 0) {
      // 加入购物车成功
      showToast({
        message: '加入购物车成功'
      })
    }
  })
}

onMounted(() => {
  fetchItemCates()
  fetchBanners()
  // fetchItemsByCateId()
})

</script>

<style lang="scss" scoped>
.content {
  padding: 50px 0;
  height: 100vh;
  background-color: #f0eeee;

  .gengduo {
    position: fixed;
    top: 50px;
    right: 0;
    background-color: #fff;
    width: 50PX;
    height: 44PX;
    display: flex;
    z-index: 5;

    .genduoIcon {
      margin: auto;
    }
  }

  .my-swipe .van-swipe-item {
    width: 10rem;
    height: 5rem;
    margin-top: 50px;

    img {
      width: 10rem;
      height: 5rem;
    }
  }

  .items {
    margin-top: 50px;
    background-color: #f1f1f1;

    .item {
      height: 110px;
      display: flex;
      padding: 10px;
      background-color: #fff;
      margin-top: 10px;

      img {
        width: 4rem;
      }

      .item-info {
        flex: 1;
        padding: 0 10px;

        h5 {
          width: 5rem;
          line-height: 40px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-top: 5px;
        }

        span {
          font-size: 20PX;
          color: #ec1109;
        }

        .addCart {
          /* margin-left: 100PX; */
          float: right;
          margin-right: 5px;
        }

        .item-action {
          display: flex;
          justify-content: space-between;

          p {
            font-size: 20PX;
            color: #ec1109;
          }

        }
      }
    }
  }



  .nothing {
    text-align: center;
    font-size: 20PX;
    margin-top: 60px;
  }
}

:deep .van-tabs__wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  margin-top: 50px;
  /* margin-bottom: 50px; */
}
</style>